<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";
import axios from "axios";
//axios.defaults.withCredentials = true;

export default {
  name: "Category",
  components : {
    HeaderComponent,
    FooterComponent
  },


  data() {
    return {
      products: [],
      form: {
                category: this.$route.params.categoryId
            },// 商品列表
    };
  },

  mounted() {
    // 在组件挂载时发送请求获取商品信息
    //var categoryId = this.$router.params.categoryId;
    //console.log(categoryId)
    this.fetchProducts();
  },

  methods: {
    getImageUrl(image) {
    return image.startsWith('/') ? image : `@${image}`
  },
    fetchProducts() {
      //const categoryId = this.$route.params.categoryId;
    //  const url = ` http://localhost:8090/catalog/viewCategory`;
      console.log(this.$route.params.categoryId)
      //console.log(url)
      axios.post('http://localhost:8090/catalog/viewCategory',{
        categoryId: this.$route.params.categoryId
      },{
        headers:{
          'Content-Type': 'multipart/form-data',
        }

      })
          .then(response => {
            const data = response.data;

            if (data.status === 0) {
              this.products = data.data;
            } else {
              console.error(data.msg);
            }
          })
          .catch(error => {
            console.error(error);
          });
    },
    viewItem(productId,image) {
      // 导航到商品详情页面，并传递商品ID作为路由参数
      //this.$router.push({ name: 'product', params: { id: productId } });
       console.log(image);
       console.log(productId);
      this.$router.push('/catalog/product/'+productId)
    },
  },
}
</script>
<template>
  <!DOCTYPE html>
  <html lang="en">
  <HeaderComponent/>
  <div id="BackLink">
    <a href="/catalog/main">Return to Main Menu</a>
  </div>
  <img align="middle" class="background1" src="../../assets/images/white.jpg" />
  <div id="Catalog">

    <h2>{{categoryId}}</h2>
    <div class="center">
      <div class="menu1" v-for="product in products" :key="product.productId">
        <a @click="viewItem(product.productId,product.image)"><label>{{product.productId}}</label>
         <img :src="'/src'+product.image" alt="">
          <label>{{ product.description }}</label><br>
          <label></label><br>
          <label>name:</label>
          <label>{{ product.name }}</label><br>
        </a>
      </div>
    </div>


  </div>

  <FooterComponent/>      <!--导入footer-->
  </html>
</template>



<style scoped>
@import "@/assets/css/category.css";
</style>